<template>
  <!-- 分类页面 -->
  <!-- 这里是状态栏 -->
  <view class="status_bar"> </view>

  <view class="fenClass pageBg">
    <!-- 顶部 -->
    <AppBarVue>
      <template #title>
        <view class="h1-style">分类</view>
      </template>
    </AppBarVue>

    <!-- 这里的:item_id用了父传子 -->
    <view class="box">
      <TongYongBoxVue
        v-for="item in FenLeiList"
        :key="item.id"
        :item_id="item._id"
        :item_name="item.name"
      >
        <template #pic>
          <image mode="scaleToFill" :src="item.picurl"></image>
        </template>
        <template #name>{{ item.name }}</template>
      </TongYongBoxVue>
    </view>
  </view>
</template>

<script setup>
import { onShareAppMessage, onShareTimeline } from "@dcloudio/uni-app";
import { getFenLeiAPI } from "../../api/apis";
import AppBarVue from "../components/AppBar.vue";
import TongYongBoxVue from "../components/TongYongBox.vue";
import { ref } from "vue";

// 分类数据
const FenLeiList = ref([]);
const FenLei = async () => {
  const res = await getFenLeiAPI({
    pageSize: 15,
  });
  FenLeiList.value = res.data.data;
};

// 分享给好友
onShareAppMessage((e) => {
  return {
    title: "白龙壁纸,精选分类",
    path: "/pages/FenLei/FenLei",
  };
});
// 分享到朋友圈
onShareTimeline(() => {
  return {
    title: "白龙壁纸,精选分类",
    imgUrl: "https://www.qingian8.com/images/hot1.jpg",
  };
});

FenLei();
</script>

<style lang="scss" scoped>
.status_bar {
  height: var(--status-bar-height);
  width: 100%;
}

.fenClass {
  padding: 30rpx;

  .h1-style {
    font-size: 45rpx;
    font-family: 黑体;
  }

  .box {
    display: flex;
    flex-wrap: wrap;
    gap: 10rpx;
    margin-top: 50rpx;
    // border: 1px solid red;

    image {
      width: 100%;
      height: 100%;
    }
  }
}
</style>
